<template>
	<view class="pages-index">
		<!-- 图表 1: 各省项目情况数据统计 -->
		<view class="title">1、各省项目情况数据统计</view>
		<view class="charts-box">
			<!-- <qiun-data-charts type="column" :opts="projectStatsOpts" :chartData="projectStatsData" /> -->
			 <!-- <qiun-data-charts 
			      type="bar"
			      :opts="projectStatsOpts"
			      :chartData="projectStatsData"
			    /> -->
				<z-table :tableData="projectList" :columns="projectColumns" textAlign="center" titleTextAlign="center"></z-table>
		</view>

		<!-- 图表 2: 项目来源数据统计 -->
		<view class="title">2、项目来源数据统计</view>
		<view class="charts-box">
			<qiun-data-charts type="mount" :opts="sourceStatsOpts" :chartData="sourceStatsData" />
		</view>

		<!-- 图表 3: 近五年收入统计 -->
		<view class="title">3、近五年收入统计</view>
		<view class="charts-box">
			<qiun-data-charts 
			      type="mount"
			      :opts="incomeStatsOpts"
			      :chartData="incomeStatsData"
			    />
			<!-- <qiun-data-charts type="pie" :opts="incomeStatsOpts" :chartData="incomeStatsData" /> -->
		</view>

		<!-- 图表 4: 项目进度状态统计 -->
		<view class="title">4、项目进度状态统计</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="progressStatsOpts" :chartData="progressStatsData" />
		</view>
	</view>
</template>

<script>
import * as index from '@/api/index.js';

export default {
	data() {
		return {
			projectColumns:[
				{
					"title":"项目归属地",
					"key":"area",
					"width": 200,
					"formatNum": false
				},
				{
					"title":"项目金额",
					"key":"money",
					"width": 350,
					"formatNum": false
				},
				{
					"title":"项目数量",
					"key":"count",
					"width": 200,
					"formatNum": false
				}
			],
			projectList:[],
			// 图表数据源
			projectStatsData: {},     // 柱状图 - 各省项目情况
			sourceStatsData: {},       // 山形图 - 项目来源
			incomeStatsData: {},       // 饼图 - 收入统计
			progressStatsData: {},     // 折线图 - 项目进度

			// 图表样式配置项
			projectStatsOpts: this.getProjectStatsOpts(),
			sourceStatsOpts: this.getSourceStatsOpts(),
			incomeStatsOpts: this.getIncomeStatsOpts(),
			progressStatsOpts: this.getProgressStatsOpts()
		};
	},
	onReady() {
		this.fetchProjectStats();   // 获取项目统计数据
		this.fetchSourceStats();    // 获取来源统计数据
		this.fetchIncomeStats();    // 获取收入统计数据
		this.fetchProgressStats();  // 获取进度统计数据
		this.getProjectList()
	},
	methods: {
		getProjectList() {
			index.listByArea().then(res=>{
				this.projectList = res.rows
			})
		},
		// ===================== 图表配置初始化 =====================
		getProjectStatsOpts() {
			return {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,30,0,5],
				        enableScroll: false,
				        legend: {},
				        xAxis: {
				          boundaryGap: "justify",
				          disableGrid: false,
				          min: 0,
				          axisLine: false,
				          max: 40
				        },
				        yAxis: {},
				        extra: {
				          bar: {
				            type: "group",
				            width: 30,
				            meterBorde: 1,
				            meterFillColor: "#FFFFFF",
				            activeBgColor: "#000000",
				            activeBgOpacity: 0.08,
				            linearType: "custom",
				            barBorderCircle: true,
				            seriesGap: 2,
				            categoryGap: 2
				          }
				        }
			};
		},
		getSourceStatsOpts() {
			return {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: { disableGrid: true },
				yAxis: { data: [{ min: 0 }] },
				extra: {
					mount: {
						type: "mount",
						widthRatio: 1.5
					}
				}
			};
		},
		getIncomeStatsOpts() {
			return {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,15,0,5],
				        enableScroll: false,
				        legend: {},
				        xAxis: {
				          disableGrid: true
				        },
				        yAxis: {
				          data: [
				            {
				              min: 0
				            }
				          ]
				        },
				        extra: {
				          mount: {
				            type: "bar",
				            widthRatio: 0.8
				          }
				        }
			};
		},
		getProgressStatsOpts() {
			return {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 10, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: { disableGrid: true, disabled: true },
				yAxis: { gridType: "dash", dashLength: 2 },
				extra: {
					line: {
						type: "curve",
						width: 2,
						activeType: "hollow"
					}
				}
			};
		},

		// ===================== 数据获取方法 =====================
		fetchProjectStats() {
			
			setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: ["2018","2019","2020","2021","2022","2023"],
			            series: [
			              {
			                name: "目标值",
			                data: [35,36,31,33,13,34]
			              }
			            ]
			          };
			        this.projectStatsData = JSON.parse(JSON.stringify(res));
			      }, 500);
		},
		async fetchSourceStats() {
			try {
				const res = await index.listBySourceGroup();
				this.sourceStatsData = {
					series: [{
						data: res.rows.map(item => ({ value: item.count, name: item.source }))
					}]
				};
			} catch (error) {
				console.error('获取项目来源数据失败:', error);
				uni.showToast({ title: '加载失败', icon: 'none' });
			}
		},
		async fetchIncomeStats() {
			try {
				const res = await index.listByYearGroup();
				this.incomeStatsData = {
					series: [{
						data: res.rows.map(item =>({name: item.year,value: item.money}))
					}]
				};
			} catch (error) {
				console.error('获取项目进度数据失败:', error);
				uni.showToast({ title: '加载失败', icon: 'none' });
			}
		},
		async fetchProgressStats() {
			try {
				const res = await index.listByStatusGroup();
				this.progressStatsData = {
					categories: res.rows.map(item => item.status),
					series: [{
						name: '数量',
						data: res.rows.map(item => item.count)
					}]
				};
			} catch (error) {
				console.error('获取项目进度数据失败:', error);
				uni.showToast({ title: '加载失败', icon: 'none' });
			}
		}
	}
};
</script>

<style lang="scss">
.pages-index {
	padding-left: 10rpx;
	padding-right: 10rpx;
	background: #ffffff;

	.title {
		color: #222;
		font-size: 32rpx;
		font-weight: bold;
	}

	.charts-box {
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		width: 100%;
		height: 300px;
	}
}
</style>